<!-- 顾客 -->
<template>
	<view class="customer-item" @click="sendChat">
		<view class="avatar-box">
			<image :src="info.avatar||`/static/images/customer/avatar.png`" mode="scaleToFill" class="avatar"></image>
			<!-- <view class="vip fs-sm fc-warn">
				复购VIP
			</view> -->
		</view>
		<view class="info-box">
			<view class="customer-title out-1 fs-lg fw-9 fc-3">
				{{info.name}}
			</view>
			<view class="sg-name out-1">
				专属导购员：{{info.head_staff_name}}
			</view>
			<view class="text fs-sm fc-9">
				消费 ￥{{info.user_info.order_total}} 消费次数 {{info.user_info.order_count}} 浏览
				{{info.user_info.user_record_count}}
			</view>
			<view class="tips out-1" v-if="info.user_info.user_record_list&&info.user_info.user_record_list.lenght">
				<text class="fc-warn fs-sm">{{info.user_info.user_record_list[0].create_time}} </text>
				<text class="fc-9 fs-sm">{{info.user_info.user_record_list[0].template}}</text>
			</view>
			<image src="/static/images/customer/customer-icon.png" mode="scaleToFill" class="item-icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'customer-item',
		data() {
			return {};
		},
		props: {
			info: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			sendChat() {
				this.$emit('sendChat', this.info.external_userid)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customer-item {
		width: 710rpx;
		background-color: #fff;
		border-radius: 18rpx;
		padding: 24rpx;
		margin: 0 auto 20rpx;
		display: flex;
		position: relative;

		.avatar-box {
			width: 120rpx;
			height: 120rpx;
			flex-shrink: 0;
			margin-right: 24rpx;
			position: relative;

			.vip {
				width: 100rpx;
				line-height: 44rpx;
				text-align: center;
				left: 0;
				right: 0;
				bottom: -10rpx;
				border-radius: 8rpx;
				background-color: #FFF6E9;
				margin: 0 auto;
				position: absolute;
				z-index: 1;
			}

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				z-index: 0;
			}
		}

		.info-box {
			flex: 1;
			position: relative;

			.customer-title {
				width: 460rpx;
				margin-bottom: 8rpx;
			}

			.sg-name {
				width: 460rpx;
				margin-bottom: 8rpx;
			}

			.text {
				margin-bottom: 8rpx;
			}

			.tips {
				max-width: 500rpx;
				margin-bottom: 8rpx;
			}

			.item-icon {
				position: absolute;
				z-index: 1;
				width: 64rpx;
				height: 64rpx;
				top: 0;
				right: 40rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}
</style>